import React from 'react';
import { Descriptions as AntdDescriptions } from 'antd';
import type { DescriptionsProps as AntdDescriptionsProps } from 'antd';
import { createStyles } from 'antd-style';

export interface DescriptionsProps extends AntdDescriptionsProps {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
}

const useStyles = createStyles(({ token, css }) => ({
  descriptions: css`
    border-radius: ${token.borderRadius}px;
  `,
}));

const DescriptionsComponent: React.FC<DescriptionsProps> = ({ customClassName, className, ...restProps }) => {
  const { styles, cx } = useStyles();
  
  const descriptionsClassName = cx(
    className,
    customClassName,
    styles.descriptions
  );

  return <AntdDescriptions className={descriptionsClassName} {...restProps} />;
};

const Descriptions = Object.assign(DescriptionsComponent, {
  Item: AntdDescriptions.Item,
});

export { Descriptions };
export default Descriptions;

